<template>
	<view style="overflow: hidden;">
		<!-- 导航栏 -->
		<ak-navbar :title="'售后详情'" :status="statusInfo.status" :image="statusInfo.image">
			<view  class="u-flex" slot="right" @back="back">
				<view class="yx-bt" v-if="info.status == 0" @click="cancelModal = true;">
					撤销
				</view>
				<view class="yx-bt" v-if="info.status == 1" @click="confirmModal = true;">
					完成售后
				</view>
			</view>
		</ak-navbar>
		<!-- 导航栏占位盒子 -->
		<!-- #ifdef APP-PLUS -->
		<view  :style="{height:  '240rpx',marginTop:statusBarHeight+'rpx'}"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view :style="{height:  '240rpx'}"></view>
		<!-- #endif -->
		<!-- 拒绝原因 -->
		<view v-if="info.rejectionReason" class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">拒绝原因</text>
			<text class="u-font-30 u-m-l-34">{{ info.rejectionReason }}</text>
		</view>
		<view  class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">{{info.afterSalesType == 1?'退款原因':'退货原因'}}</text>
			<text class="u-font-30 u-m-l-34">{{ info.reason||'无' }}</text>
		</view>
		<!-- 退款金额 -->
		<view class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">退款金额</text>
			<text class="u-font-32 badge-color u-m-l-34">￥{{ info.amount }}</text>
		</view>
		<view class="box-color box-padding-col">
			<view class="u-font-32 text-bold" style="height: 90rpx; line-height: 90rpx;">
				售后商品
			</view>
			<view class="list-item"  >
				<view class="item-header">
					<view class="left">
						{{ info.approverShopName }}
					</view>
					<view class="right">
						<view v-if="info.afterSalesType == 1" class="u-font-24 theme-color theme-box">
							退款
						</view>
						<view v-else class="u-font-24 theme-color theme-box">
							退货
						</view>
						<!-- <text :style="{fontSize: '26rpx', color: badgeColor}">{{info.statusDescription}}</text> -->
					</view>
				</view>
				<view class="item-content" v-for="item in info.items" :key="item.itemId">
					<img :src="item.itemResourceUrl" alt="" style="width: 180rpx;height:180rpx;border-radius: 10rpx;">
					<view class="u-flex-col u-row-around u-m-l-20" style="flex-grow: 1;">
						<view>{{ item.itemName }}</view>
						<view class="u-flex u-row-between">
							<view class="u-flex u-row-left">
								<view class="grey-box">
									{{ item.specification }}
								</view>
							</view>
							<view class="u-font-32">
								￥{{ item.unitPrice }}
							</view>
						</view>
						<view class="u-flex u-row-right">
							<view  class="grey-box">
								x{{ item.quantity }}
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" >
					<view class="u-flex u-row-between">
						
					</view>
					<view class="u-text-right">
						<!-- <text :style="{fontSize: '32rpx', color: greyColor}">总价￥4300.00</text> -->
						<text class="u-font-28">退款额 <text class="u-font-36 badge-color">￥{{ info.amount }}</text></text>
					</view>
				</view>
				<hr style="margin-top: 30rpx;opacity: 0.1;" />
				<view class="item-footer">
					<view  class="u-font-24 grey-color">售后单号：{{ info.serialNo }}</view>
					<view  class="u-font-24 grey-color">订单号：{{ info.tradeNo }}</view>
				</view>
			</view>
		</view>
		<!-- 描述和凭证 -->
		<view class="box-color box-padding">
			<text class="text-bold u-font-32">描述和凭证</text>
			<view class="u-m-t-30">
				<text class="u-font-28 grey-color">{{ info.applicantRemarks }}</text>
			</view>
			<view style="display: flex;flex-wrap: wrap;margin-top: 20rpx;">
				<image :src="item.url" v-for="(item,index) in info.attachments" style="width: 140rpx;height: 140rpx;border-radius: 5rpx;margin-right: 20rpx;" mode="" :key="index" @click="previewImg(index)"></image>
			</view>
		</view>
		<!-- 占位 -->
		<view style="height: 200rpx;"></view>
		<!-- 录入单号 -->
		<u-popup v-model="logisticsShow" mode="bottom">
			<view class="box-padding">
				<u-field v-model="logisticsNo" required :field-style="{marginLeft: '20rpx'}" label="物流单号" placeholder="请输入物流单号" placeholder-style="color: #999999;" />
				<u-field v-model="logisticsCompany" required :field-style="{marginLeft: '20rpx'}" label="物流公司" placeholder="输入单号自动识别" placeholder-style="color: #999999;" />
				<view class="u-flex u-row-center" style="height: 80rpx;">
					<text class="u-font-32 theme-color" @click="handleLogistics">确认</text>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="cancelModal" :content="'您确定要撤销该售后订单？'" @confirm="cancelAppealFn"></u-modal>
		<u-modal v-model="confirmModal" :content="'您确定要完成该售后订单？'" @confirm="confirmAppealFn"></u-modal>
	</view>
</template>

<script>
	import AkNavbar from '@/components/ak-navbar/index.vue'
	import AkSteps from '@/components/ak-steps/index.vue'
	import { orderStore } from '@/store/order.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkSteps, AkNavbar },
		data() {
			return {
				cancelModal:false,
				confirmModal:false,
				stepList: [
					{
						name: '待取货',
						time: ''
					},
					{
						name: '卖家已同意退货',
						time: '2021-08-31 16:26'
					},
					{
						name: '发起退货',
						time: '2021-08-31 14:22'
					}
				],
				id: null,
				info: {},
				statusInfo: {},
				logisticsShow: false,
				logisticsCompany: '',
				logisticsNo: '',
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		computed:{
			...mapState(orderStore, {afterStatus: 'afterStatus'})
		},
		methods: {
			async cancelAppealFn(){
				this.cancelModal = false;
				uni.showLoading({
					title:'loading...'
				})
				const res = await this.$newHttp.put('api/v1.3/AfterSalesOrder/Withdraw',{id:this.id});
				uni.hideLoading();
				if(res.code===200){
					this.getDetail()
				}else{
					this.$u.toast(res.erroMessage);
				}
			},
			async confirmAppealFn(){
				this.confirmModal = false;
				uni.showLoading({
					title:'loading...'
				})
				const res = await this.$newHttp.put('api/v1.3/AfterSalesOrder/ApplicantCompleteAfterSalesOrder',{id:this.id});
				uni.hideLoading();
				if(res.code===200){
					this.getDetail()
				}else{
					this.$u.toast(res.erroMessage);
				}
			},
			async getDetail() {
				const res = await this.$http.get('api/v1.3/AfterSalesOrder/ApplicantGetById', { params: { id: this.id } })
				this.info = res
				this.statusInfo = this.afterStatus.find(item => {
					return item.state == res.status
				})
			},
			// 录入单号
			async handleLogistics() {
				if (!this.logisticsCompany) {
					return this.$u.toast('请输入物流公司')
				}
				if (!this.logisticsNo) {
					return this.$u.toast('请输入物流单号')
				}
				const data = {
					id: this.id,
					logisticsNo: this.logisticsNo,
					logisticsCompany: this.logisticsCompany
				}
				const res = await this.$http.put('api/AfterSale/InputLogisticsNo', data)
				this.logisticsShow = false
				this.$u.toast('录入成功', 1000, 'success')
				this.$mHelper.delayedJump()
			},
			previewImg(index) {
				const imageArr = this.info.attachments.map(row => {
					return  row.url
				})
				uni.previewImage({
					current: index,
					urls: imageArr
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	
		.item-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			font-weight: bold;
		
			.left {
				font-size: 30rpx;
				line-height: 81rpx;
				height: 81rpx;
			}
			.right {
				font-size: 26rpx;
				color: $theme-color;
			}
			.theme-box {
				border: 1rpx solid $theme-color;
				padding: 5rpx 16rpx;
				border-radius: 5rpx;
			}
		}
		.item-content {
			display: flex;
			justify-content: flex-start;
			margin-bottom: 30rpx;
			.center {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}
		.item-footer {
			padding: 20rpx 0;
		}
	}
	.info-item {
		height: 50rpx;
		line-height: 50rpx;
	}
	.info {
		color: $uni-text-color-grey;
		font-size: 28rpx;
	}
	.yx-bt {
		width: 200rpx;
		height: 80rpx;
		border: 1rpx solid $uni-text-color;
		border-radius: 40px;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	::v-deep .u-field {
		padding: 40rpx 0;
	}
	::v-deep .u-label-text {
		color: #000000 !important;
		font-size: 32rpx !important;
	}
</style>
